var SearchForm = function () {
  var template = /* html */ `
    <search-btn-view immediate class="search-form" btn-text="采购单查询" @before-open="resetSearch" @search="searchData">
      <template slot="append">
        <slot></slot>
      </template>
      <template slot="right">
        <slot name="right"></slot>
      </template>

      <div slot="search-content">
        <sys-common-search ref="searchRef" :search="search" request-url="materialSelectFilter/getMaterialSelectData"
          :request-data="{type:3}" label-width="auto" input-width="280px" :search-field="searchField">
          <template slot="prepend">
            <el-form-item label="采购类型" v-if="isPayUser">
              <el-select class="form-input" v-model="search.type">
                <el-option v-for="item in typeList" :key="'type_'+item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="append">
            <el-form-item label="供方编号">
              <el-input class="form-input" v-model="search.providerNo"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select clearable class="form-input" v-model="search.status">
                <el-option v-for="item in statusList" :key="'type_'+item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="欠数">
              <el-input-number class="form-double" v-model="search.oweCountMin" controls-position="right" :min="0" :max="search.oweCountMax"></el-input-number>
              -
              <el-input-number class="form-double" v-model="search.oweCountMax" controls-position="right" :min="search.oweCountMin===undefined?0:search.oweCountMin"></el-input-number>
            </el-form-item>
            <el-form-item label="制单日期">
              <el-date-picker class="form-double" v-model="search.startTime" value-format="timestamp" :editable="false"
                :picker-options="startPickerOptions"></el-date-picker>
              -
              <el-date-picker class="form-double" v-model="search.endTime" value-format="timestamp" :editable="false"
                :picker-options="endPickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="入库日期">
              <el-date-picker class="form-double" v-model="search.inCountDateStart" value-format="timestamp" :editable="false"
                :picker-options="inCountDateStartPickerOptions"></el-date-picker>
              -
              <el-date-picker class="form-double" v-model="search.inCountDateEnd" value-format="timestamp" :editable="false"
                :picker-options="inCountDateEndPickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="是否入库">
              <el-select clearable class="form-input" v-model="search.isInCount">
                <el-option v-for="inCountStatus in inCountStatusList" :key="'inCountStatus_'+inCountStatus.value" :value="inCountStatus.value"
                  :label="inCountStatus.label">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="工厂型号">
              <el-input class="form-input" v-model="search.factoryNo" placeholder="请输入工厂型号"></el-input>
            </el-form-item>
            <el-form-item label="客户型号">
              <el-input class="form-input" v-model="search.customerNo" placeholder="请输入客户型号"></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input class="form-input" v-model="search.orderNo" placeholder="请输入订单编号"></el-input>
            </el-form-item>

            <template v-if="search.type===1">
              <el-form-item label="有效采购单" v-if="search.type===1">
                <el-select clearable class="form-input" v-model="search.purchaseCount">
                  <el-option v-for="purchaseStatus in purchaseStatusList" :key="'purchaseStatus_'+purchaseStatus.value" :value="purchaseStatus.value"
                    :label="purchaseStatus.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>

            <el-form-item label="是否打印">
              <el-select clearable class="form-input" v-model="search.isPrint">
                <el-option v-for="printStatus in printStatusList" :key="'printStatus_'+printStatus.value" :value="printStatus.value" :label="printStatus.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="拖期">
              <el-input-number class="form-double" v-model="search.tardinessMin" controls-position="right" :max="search.tardinessMax" :precision="0"></el-input-number>
              -
              <el-input-number class="form-double" v-model="search.tardinessMax" controls-position="right" :min="search.tardinessMin" :precision="0"></el-input-number>
            </el-form-item>
          </template>
        </sys-common-search>
      </div>
    </search-btn-view>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },
      user: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      var self = this;
      return {
        isPayUser: this.user.companyInfo.status === 1,
        searchField: ['materialName', 'materialType', 'model', 'color', 'providerName', 'materialDept'],
        typeList: i18n.getDropDown('purchaseOrder.orderType', [1, 2]),
        statusList: i18n.getDropDown('purchaseOrder.status', [0, 1]),
        inCountStatusList: i18n.getDropDown('purchaseOrder.inCountStatus', [1, 0]),
        printStatusList: i18n.getDropDown('purchaseOrder.printStatus', [1, 0]),
        purchaseStatusList: i18n.getDropDown('purchaseOrder.purchaseStatus', [1, 0]),
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        },
        inCountDateStartPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'inCountDateStart');
          }
        },
        inCountDateEndPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'inCountDateEnd');
          }
        }
      };
    },

    methods: {
      resetSearch: function () {
        this.$emit('reset-search');
      },

      searchData: function () {
        this.$emit('search');
      },

      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start' || type === 'inCountDateStart') {
          var endTime = type === 'start' ? search.endTime : search.inCountDateEnd;
          if (endTime !== null) {
            return moment(time).isSameOrBefore(endTime, 'day');
          }
        }

        if (type === 'end' || type === 'inCountDateEnd') {
          var startTime = type === 'end' ? search.startTime : search.inCountDateStart;
          if (startTime !== null) {
            return moment(time).isSameOrAfter(startTime, 'day');
          }
        }
        return true;
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch,
      SearchBtnView: SearchBtnView
    },

    template: template
  };
}();
